<template>
	<div>
		<el-row>
		
		</el-row>
		<el-row>
			<el-col :span="1" class="labelCol">
				<p class="labelText">开始日期:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker style="width: 90%;" size="small" v-model="date.start" format="yyyy-MM-dd" :editable=false type="date" placeholder="开始日期">
				</el-date-picker>
			</el-col>
			<el-col :span="1" class="labelCol">
				<p class="labelText">结束日期:</p>
			</el-col>

			<el-col :span="4">
				<el-date-picker size="small" style="width: 90%;" v-model="date.end" format="yyyy-MM-dd" :editable=false type="date" placeholder="结束日期">
				</el-date-picker>
			</el-col>

			<el-col :span="1" class="labelCol">
				<p class="labelText">是否初始化:</p>
			</el-col>

			<el-col :span="2">
				<el-checkbox v-model="isInit" label="是"></el-checkbox>
			</el-col>

			<el-col :span="9" style="text-align: right;">
				<el-button type="primary" size="small" v-on:click='create'>生成任务</el-button>
				<el-button type="primary" size="small" v-on:click='clean'>清除任务</el-button>
				<el-button type="primary" size="small" v-on:click='saveCar'>确认任务</el-button>
				<el-button type="primary" size="small" v-on:click='group'>任务统计</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-collapse v-model="activeName">
					<el-collapse-item title="查询条件" name="1">
						<el-row :gutter="24">
							<el-col :span="1" class="labelCol">
								<p class="labelText">任务大类:</p>
							</el-col>
							<el-col :span="4">
								<el-select v-model="taskPtype" size='small' placeholder="任务大类" clearable @change="taskStatusChange">
									<el-option v-for="item in  taskPTypeCombo" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-col>
							<el-col :span="1" class="labelCol">
								<p class="labelText">任务明细:</p>
							</el-col>
							<el-col :span="4">
								<el-select v-model="taskCtype" size='small' placeholder="任务细类" clearable>
									<el-option v-for="item in  taskCTypeCombo" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-col>
							<el-col :span="1" class="labelCol">
								<p class="labelText">车牌号:</p>
							</el-col>
							<el-col :span="4">
								<el-input size="small" v-model="plateNum" placeholder="车牌号">
								</el-input>
							</el-col>
							<el-col :span="1">
								<el-button type="primary" size="small" v-on:click='queryTaskGrid'>查 询</el-button>
							</el-col>
						</el-row>
					</el-collapse-item>
				</el-collapse>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="taskGrid.dataList" border @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="60">
					</el-table-column>
					<el-table-column label="类别" width="150">
						<template scope="scope">
							<el-tag type="primary">{{scope.row.typeName}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="日期" align="center" width="150">
						<template scope="scope">
							{{scope.row.expect_date}}
						</template>
					</el-table-column>
					<el-table-column prop="vin" label="车架号" width="180">
					</el-table-column>
					<el-table-column prop="plateNum" label="车牌号" width="140">
						<template scope="scope">
							<span> {{scope.row.plateNum}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="content" label="任务标题">
					</el-table-column>

					<el-table-column prop="statusName" label="备注" width="150">
					</el-table-column>
					<!--<el-table-column prop="uname" label="处理人" width="140">
																																																			</el-table-column>-->
				</el-table>
				<el-pagination small @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="taskGrid.total">
				</el-pagination>
			</el-col>

		</el-row>
		<el-dialog title="任务统计" v-model="concatShow" size="tiny">
			<el-row>
				<el-col :span="24">
					<el-table :data="taskGrids.data" border>
						<el-table-column prop="name" label="任务标题">
						</el-table-column>
						<el-table-column prop="counts" label="任务数量" align="right">
						</el-table-column>

					</el-table>
				</el-col>
				<!--<el-col :span="24">
																																																			<div style="height: 1.5em;"></div>
																																																		</el-col>-->
			</el-row>
		</el-dialog>
	</div>
</template>
<script>
import moment from "moment";
export default {
  data: function() {
    return {
      area: "",
      brand: "",
      companyId: window.localStorage.getItem("companyId"),
      areaCombo2: [],
      brandCombo: [],
      companyCombo: [],
      concatShow: false,
      page: this.page,
      CurentPage: 1,
      isInit: false,
      date: {
        start: "",
        end: ""
      },
      taskGrid: {
        total: 0,
        dataList: []
      },
      taskGrids: {
        total: 0,
        data: []
      },
      activeName: ["1"],
      plateNum: "",
      taskPtype: "",
      taskCtype: "",
      //任务类型
      taskPTypeCombo: [],
      taskCTypeCombo: [],
      //任务状态
      bxChild: [],
      gaChild: [],
      lsChild: [],
      //任务状态
      byChild: [],
      zhChild: [],

      multipleSelection: []
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange: function(page) {
      this.$data.CurentPage = page;
      this.queryTaskGrid();
    },
    taskStatusChange: function(value) {
      debugger;
      switch (value) {
        case "by":
          this.$data.taskCTypeCombo = this.$data.byChild;
          this.$data.taskCtype = "";
          break;
        case "bx":
          this.$data.taskCTypeCombo = this.$data.bxChild;
          this.$data.taskCtype = "";
          break;
        case "ls":
          this.$data.taskCTypeCombo = this.$data.lsChild;
          this.$data.taskCtype = "";
          break;
        case "ga":
          this.$data.taskCTypeCombo = this.$data.gaChild;
          this.$data.taskCtype = "";
          break;
        case "qt":
          this.$data.taskCTypeCombo = this.$data.qtChild;
          this.$data.taskCtype = "";
          break;
        case "zh":
          this.$data.taskCTypeCombo = this.$data.zhChild;
          this.$data.taskCtype = "";
          break;
        default:
          this.$data.taskCTypeCombo = [];
          this.$data.taskCtype = "";
          break;
      }
    },
    /*************加载任务列表**********/
    queryTaskGrid: function() {
      this.$http({
        method: "GET",
        url: this.API_ROOT + "/crm/task/searchpage",
        params: {
          start: this.$data.CurentPage,
          limit: this.$data.page.pageSize,
          pcode: this.$data.taskPtype,
          code: this.$data.taskCtype,
          platenum: this.$data.plateNum,
          companyId: this.$data.companyId
        }
      }).then(
        function(resp) {
          //success
          debugger;
          resp.data.total = parseInt(resp.data.total);
          this.$data.taskGrid = resp.data;
          debugger;
        },
        function(error) {
          //error
        }
      );
    },
    /*************加载任务列表*********crm/task/taskCount*/
    //任务统计
    group: function() {
      this.$http({
        method: "GET",
        url: this.API_ROOT + "/crm/task/taskCount",
        params: {
          companyId: this.$data.companyId
        }
      }).then(
        function(resp) {
          //success
          debugger;
          this.$data.concatShow = true;
          //resp.data.total = parseInt(resp.data.total);
          this.$data.taskGrids = resp.data;
          debugger;
        },
        function(error) {
          //error
        }
      );
    },
    //导入事件
    saveCar: function() {
      debugger;
      if (this.$data.multipleSelection.length == 0) {
        this.saveCarAll();
      } else {
        this.saveCarCheck();
      }
    },
    //批量导入
    saveCarCheck: function() {
      debugger;
      this.$confirm("确认要导入这些任务吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$data.loadingVues = this.$loading({
            fullscreen: true,
            text: "正在导入数据，请稍候"
          });
          debugger;
          this.$http
            .post(
              this.API_ROOT + "/crm/task/transferTaskBatch",
              this.$data.multipleSelection,
              {
                params: {
                  pcode: this.$data.taskPtype,
                  code: this.$data.taskCtype,
                  platenum: this.$data.plateNum,
                  companyId: this.$data.companyId
                }
              }
            )
            .then(
              resp => {
                if (resp.data.success) {
                  this.$message(resp.data.msg);
                  this.queryTaskGrid();
                  this.$data.loadingVues.close();
                } else {
                  this.$message.error(resp.data.msg);
                  this.$data.loadingVues.close();
                }
              },
              resp => {}
            );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消此操作"
          });
        });
    },
    //全部导入
    saveCarAll: function() {
      debugger;
      this.$confirm("确认要导入这些任务吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$data.loadingVues = this.$loading({
            fullscreen: true,
            text: "正在导入数据，请稍候"
          });

          this.$http
            .get(this.API_ROOT + "/crm/task/transferTask", {
              params: {
                pcode: this.$data.taskPtype,
                code: this.$data.taskCtype,
                platenum: this.$data.plateNum,
                companyId: this.$data.companyId
              }
            })
            .then(
              resp => {
                if (resp.data.success) {
                  this.$message(resp.data.msg);
                  this.queryTaskGrid();
                  this.$data.loadingVues.close();
                } else {
                  this.$message.error(resp.data.msg);
                  this.$data.loadingVues.close();
                }
              },
              resp => {}
            );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消此操作"
          });
        });
    },
    //清空任务clean
    clean: function() {
      debugger;
      this.$confirm("确认要清空这些任务吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .post(
              this.API_ROOT + "/crm/task/cleanTask",
              {},
              {
                params: {
                  companyId: this.$data.companyId
                }
              }
            )
            .then(
              resp => {
                if (resp.data.success) {
                  this.$message(resp.data.msg);
                  this.queryTaskGrid();
                } else {
                  this.$message.error(resp.data.msg);
                }
              },
              resp => {}
            );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消此操作"
          });
        });
    },
    //创建任务 create
    create: function() {
      if (this.$data.date.start != "" && this.$data.date.end != "") {
        this.$confirm("确认要生成任务吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            debugger;
            this.$data.loadingVue = this.$loading({
              fullscreen: true,
              text: "正在生成任务，请稍候"
            });
            var startTime;
            var endTime;
            if (this.$data.date.start == "") {
              startTime = "";
            } else {
              startTime = this.moment(this.$data.date.start).format(
                "YYYY-MM-DD"
              );
            }
            if (this.$data.date.end == "") {
              endTime = "";
            } else {
              endTime = this.moment(this.$data.date.end).format("YYYY-MM-DD");
            }
            this.$http({
              method: "POST",
              url: this.TASK_API + "/crm/task/pre",
              params: {
                startDate: startTime,
                endDate: endTime,
                companyId: this.$data.companyId,
                isInit: this.$data.isInit
              }
            }).then(
              resp => {
                if (resp.data.success) {
                  this.$message(resp.data.msg);
                  this.queryTaskGrid();
                  this.$data.loadingVue.close();
                } else {
                  this.$message.error(resp.data.msg);
                  this.$data.loadingVue.close();
                }
              },
              resp => {}
            );
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消此操作"
            });
          });
      } else {
        this.$message.error("请选择开始时间和结束时间！");
      }
    },

   
    //公共字典
    loadDict: function() {
      //任务状态
      this.$http
        .get(this.API_ROOT + "/base/dict/combo/groups", {
          params: {
            group: "02030602,by,bx,ga,qt,ls,zh"
          }
        })
        .then(
          response => {
            var combo = response.data;
            this.$data.taskPTypeCombo = combo["02030602"];
            this.$data.bxChild = combo["bx"];
            this.$data.gaChild = combo["ga"];
            this.$data.lsChild = combo["ls"];
            this.$data.zhChild = combo["zh"];
            this.$data.qtChild = combo["qt"];
            this.$data.byChild = combo["by"];
          },
          response => {}
        );
    }
  },

  created: function() {
    this.loadDict();
  
  }
};
</script>
<style>
.el-upload {
  clear: both;
}
</style>